<template>
  <base-container>
    <!-- 搜索栏 -->
    <avue-table-search
      :option="searchOption"
      v-model="searchParams"
      @search-change="loadTableSearch"
      @search-reset="loadTableSearchReset"
    />
    <!-- 卡片容器 -->
    <base-table-card>
      <template #header-left>
        <el-tabs v-model="searchParams.status" @tab-change="loadGetTableData">
          <el-tab-pane label="正常" :name="1" />
          <el-tab-pane label="已停用" :name="2" />
        </el-tabs>
      </template>
      <template #header-right>
        <el-button type="primary" @click="handleOpenAddDialog">新增运营模式</el-button>
      </template>
      <avue-crud
        ref="avueCrudRef"
        :option="tableOption"
        :data="tableData"
        v-model="formData"
        :page="page"
        :table-loading="tableLoading"
        :before-open="handleBeforeOpen"
        @refresh-change="loadGetTableData"
        @current-change="loadTablePageChange"
        @size-change="loadTablePageSizeChange"
        @row-save="loadAdd"
        @row-update="loadEdit"
      >
        <template #menuIds-form>
          <FormSelectTree
            v-model="formData.menuIds"
            :tree-data="menuTreeData"
            :tree-props="{ label: 'name', children: 'children' }"
          />
        </template>
        <template #menu>
          <el-button type="primary" text @click="handleOpenAddDialog">编辑</el-button>
          <el-button type="primary" text>停用</el-button>
        </template>
      </avue-crud>
    </base-table-card>
  </base-container>
</template>

<script setup>
  import Option from "@/crudOption/menu/operationMode";

  onMounted(() => {
    // 获取表格数据
    loadGetTableData();
  });

  const menuIds = ref([]);

  // avue-crud 组件实例
  const avueCrudRef = ref({});

  // 增删改查 hook
  let {
    data: tableData,
    loading: tableLoading,
    page: page,
    search: searchParams,
    form: formData,
    get: loadGetTableData,
    add: loadAdd,
    edit: loadEdit,
    pageNumChange: loadTablePageChange,
    pageSizeChange: loadTablePageSizeChange,
    searchReset: loadTableSearchReset,
    searchChange: loadTableSearch,
  } = useCrudHook({
    get: Api.mode.GetModePage,
    add: Api.mode.AddMode,
    edit: Api.mode.UpdateMode,
    search: { status: 1 },
    getParamsFormat: params => {
      // 新增时间
      if (params.createTime && params.createTime.length === 2) {
        params.createTimeStart = params.createTime[0];
        params.createTimeEnd = params.createTime[1];
        delete params.createTime;
      }
      // 编辑时间
      if (params.updateTime && params.updateTime.length === 2) {
        params.updateTimeStart = params.updateTime[0];
        params.updateTimeEnd = params.updateTime[1];
        delete params.updateTime;
      }
      // 返回查询参数
      return params;
    },
  });

  // 获取 搜索配置 和 表格配置
  const { searchOption, tableOption } = Option(formData);

  // 弹窗打开前
  const handleBeforeOpen = done => {
    // 获取菜单树
    loadMenuTree();
    nextTick(done);
  };

  // 菜单树数据
  const menuTreeData = ref([]);

  // 获取菜单树数据
  const loadMenuTree = async () => {
    Api.menu.GetMenuTree({ platform: 2 }).then(res => {
      menuTreeData.value = res.data.data || [];
    });
  };

  // 打开新增弹窗
  const handleOpenAddDialog = () => {
    formData.value = { ...formData.value, menuIds: [] };
    avueCrudRef.value.rowAdd();
  };
</script>
<style lang="scss" scoped></style>
